﻿<script type="text/x-handlebars" data-template-name="sort-option-item">
    <dd {{bindAttr class="isActive:active isDesc:reversed"}} {{action sortBy on="click"}}><a href="#">{{Name}}</a></dd>
</script>

<script type="text/x-handlebars" data-template-name="products-table">
    <div class="row">

        <div class="large-6 columns">
            <dl class="sub-nav">
                <dt>Filter:</dt>
                <dd class="active"><a href="#">All</a></dd>
                <dd><a href="#">Active</a></dd>
                <dd><a href="#">Suspended</a></dd>
            </dl>
        </div>

        <div class="large-6 columns">
            <dl class="sub-nav">
                <dt>Sort:</dt>

                {{#each option in controller.sortOptions}}
                    {{view App.SortOptionView controllerBinding="option"}}
                {{/each}}

            </dl>
        </div>

    </div>

    <!-- Products header -->
    <div class="panel transparent-panel hide-for-small">
        <div class="row">
            <div class="small-2 large-1 columns">
                <strong>Icon</strong>
			      </div>
			      <div class="small-4 large-4 columns">
                <strong>Name</strong>
			      </div>
			      <div class="large-3 columns">
                <strong>Date</strong>
			      </div>
            <div class="large-4 columns">
                <strong>Description</strong>
            </div>
        </div>
    </div>
            
    <!-- Products list -->
    {{#each product in controller.arrangedContent}}
        {{view App.ProductView controllerBinding="product"}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="product-row">
    <div class="panel">
		<div class="row">
			<div class="small-4 large-1 columns">
                <img src="/Content/demo/ok-256x2561.png" width="32" height="32" />
			</div>
			<div class="small-4 large-4 columns zero-padding-left">
                {{Name}}
			</div>
			<div class="large-3 columns">
                <div class="small-4 columns show-for-small zero-padding-left">Date:&nbsp;</div>{{Date}}
			</div>
            <div class="large-4 columns">
                <div class="small-4 columns show-for-small zero-padding-left">Description:&nbsp;</div>{{Description}}
            </div>
		</div>
    </div>
</script>
